<template>
<div class="father">
  <h3>父组件</h3>
  <h3>父组件的蛋糕:{{ cake }}</h3>
  <h4>大孩子的给的玩具:{{ toy }}</h4>
  <h4>小孩子给的电脑:{{ computer }}</h4>
  <button @click="emitter.emit('send-cake-tochild1',cake)">父组件给蛋糕给孩子1</button>
  <button @click="emitter.emit('send-cake-tochild2',cake)">父组件给蛋糕给孩子2</button>
  <Child1 />
  <Child2 />
</div>
</template>
<script lang="ts" setup name="Father">
import { ref } from 'vue'
import Child1 from './Child1.vue';
import Child2 from './Child2.vue';
import { onUnmounted } from 'vue'
import emitter from '@/utils/emitter'
//数据
let cake = ref('蛋糕1');
let toy = ref('');
let computer = ref('');

// 给emitter绑定send-toy-tofather事件
emitter.on('send-toy-tofather', (value: any) => {
    toy.value = value
})
// 给emitter绑定send-computer-tofather事件
emitter.on('send-computer-tofather', (value: any) => {
   computer.value = value
})
// 在组件卸载时解绑send-toy事件
onUnmounted(() => {
    emitter.off('send-toy-tofather')
    emitter.off('send-computer-tofather')
})

</script>
<style scoped>
	.father{
		background-color:rgb(165, 164, 164);
		padding: 20px;
    border-radius: 10px;
	}
  .father button{
    margin-left: 5px;
  }
</style>